<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>个人中心</template>
            <template v-slot:right></template>
        </nav-bar>

        <div class="huiyuan">

          <van-popup
            v-model:show="showPay"
            closeable
            position="top"
            :style="{ height: '30%' }"
          >
            <br><br>
            <van-uploader :after-read="afterRead" />
<van-cell-group inset>
  <van-field v-model="mza" label="新名字" placeholder="请输入用户名" />
  <van-button plain type="primary" @click="qdgm">确定改名</van-button>
</van-cell-group>
          </van-popup>




          <van-image
            round
            width="5rem"
            height="5rem"
            fit="cover"
            :src="avatar_url"
            @click="changeimg"
          />
          <br>
          <span>ID:{{id}}</span>

          <van-card
            :desc="email"
            :title="name"
          >
          <template #tags>
            <span> {{created_at}}</span>
          </template>
            <template #footer>
              <van-button round size="mini" @click="mingzi">修改资料</van-button>
            </template>
          </van-card>
        </div>
         
        <van-grid>
          <van-grid-item icon="gold-coin-o" text="订单列表" @click="goTo('/order')"/>
          <van-grid-item icon="logistics" text="配送地址" @click="goTo('/address')" />
          <van-grid-item icon="like-o" text="我的收藏" @click="goTo('/addcp')" />
          <van-grid-item icon="phone-o" text="联系我们" @click="goTo('/contact')"/>
        </van-grid>
 
        <div class="foot">
          <van-button type="default" @click="tologout" color="#7232dd">退出登陆</van-button>
        </div>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import {logout,getuser,changepic,changename} from 'network/user';
import {Toast} from 'vant';
import {useRouter} from 'vue-router';
import { useStore } from 'vuex';
import {reactive,toRefs,ref,onMounted } from 'vue';

export default {
  name:"About",
    components:{
        NavBar
    },
  setup() {
    const router = useRouter();
    const store = useStore();
    const mza = ref('');
    const state = reactive({
        showPay:false,
    });

    const tologout = ()=>{
      logout().then(res=>{
        if(res.status == '204'){

          //在vuex 状态管理isLogin
          store.commit('setIsLogin','false');

          Toast.success('退出成功')

          //清除windows.localStroage
          window.localStorage.setItem('token','');
          setTimeout(()=>{
            router.push({path:'/login'});
          },500)
        }
      })
    }
    
    const userinfo = reactive({
            avatar_url:'',
            email:'',
            name:'',
            created_at:'',
            id:'',
        })
    //获取用户信息    
    

    const init=()=>{
      getuser().then(res=>{
        userinfo.name = res.name;
        userinfo.email = res.email;
        userinfo.avatar_url = res.avatar_url;
        userinfo.created_at = '注册时间:' + res.created_at ;
        userinfo.id = res.id;
      })
    }

    onMounted(()=>{
      init();
    })



    //跳转
    const goTo =(path,query) => {
      router.push({path,query:query || {}});
    }

    //修改用户头像
    const changeimg = ()=>{
      state.showPay = true;   

    }
      const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      const param = new FormData();
      param.append("avatar",file.file);  //avatar后台接口请求的参数 file.file是vant组件
      console.log(param);
      changepic(param).then(res=>{
        Toast.success('头像更改成功')
        setTimeout(()=>{
          init();
          state.showPay = false;
        },1000) 
      }); 
      

      };
    //修改用户名
    const mingzi = ()=>{
      state.showPay = true; 
    } 

    const qdgm =()=>{
        console.log(mza.value);
        changename({name:mza.value});
        setTimeout(()=>{
           init();
           state.showPay = false; 
           mza.value = '';
        },1000)  

      } 
     

    return {
      tologout,
      ...toRefs(userinfo),
      goTo,
      changeimg,
      ...toRefs(state),
      changepic,
      afterRead,
      mingzi,
      mza,
      changename,
      qdgm,

    }
  },
}
</script>

<style scoped lang="scss">
.huiyuan{
  margin-top: 50px;
  padding: 30px;
}
.van-card {
  display: flex;
  text-align: left;
  font-size: 15px;
  color: #7232dd !important;
  line-height: 40px;
  height: 80px;
  background: rgb(200, 219, 209);
  border-radius:10px!important;
}
.van-card__footer .van-button {
  flex: 1;
  position: fixed;
  right: 30px;
}
.foot{
  margin-top: 100px;
  flex: 1;
  bottom: 100px;
}
.van-grid-item{
  color: #7232dd !important;
}
</style>


